﻿<%@ Page Title="" Language="C#" MasterPageFile="~/W_View/PageMaster.Master" AutoEventWireup="true" CodeBehind="DiviResultChartPage.aspx.cs" Inherits="STHPMS1.Web.W_View.Decision.Needs.DiviResultChartPage" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <%= UiHelper.RefJsFileHtml("/Scripts/Control/datagrid.js")%>
    <%= UiHelper.RefJsFileHtml("/Scripts/Control/dropdown.js")%>
    <%= UiHelper.RefJsFileHtml("/Scripts/Highcharts/highcharts.js")%>

    <script type="text/javascript">
        var chart;
        var options;
        $(function () {
            $(document).ready(function () {
                options = {
                    plotOptions: {
                        series: {
                            events: {
                                click: function (e) {
                                    //判断没有画在原始路段桩号上
                                    if ($("#segid").val().indexOf(e.point.x) == -1) {

                                        m(this.chart, e.point.x); //画线
                                        if ($("#newSegId").text().indexOf(e.point.x) == -1)//判断第一次画线
                                        {
                                            $("#newSegId").text(e.point.category + "," + $("#newSegId").text())//保存该线路的结束桩号
                                        }

                                    }
                                }
                            }
                        }
                    },
                    chart: {
                        renderTo: 'container',
                        type: 'spline'
                    },
  
                    credits: {
                        enabled: false   //右下角不显示LOGO
                    },

                    title: {
                        style: {
                            'fontWeight': 'bold',
                            "fontSize": "24px"
                        },
                        text: '公路技术状况评定指标',
                        x: -20 //center
                    },
                    subtitle: {
                        style:{
                            'fontWeight': 'bold',
                             "fontSize": "22px"
                        },
                        text: '来源: 年度检测数据',
                        x: -20
                    },
                    xAxis: {
                        categories: [],
                        tickInterval: 5000,
                        labels: {
                            formatter: function () {
                                return formatPile(this.value).replace('.','');
                            },
                            style: {
                    'fontWeight': 'bold',
                    "fontSize": "14px"
                }
                        }
                    },
                    yAxis: {
                       // tickInterval: 5,   //设置Y轴坐标值的间隔固定为100
                        title: {
                            style: {
                                'fontWeight': 'bold',
                                "fontSize": "14px"
                            },
                            text: '指标值'
                        },
                       
                        labels: {
                            style: {
                                'fontWeight': 'bold',
                                "fontSize": "14px"
                            }
                        },
                        plotLines: [{
                            value: 0,
                            width: 1,
                            color: '#808080'
                        }]
                    },

                    tooltip: {
                        formatter: function () {
                            return '终点桩号: <b>' + formatPile(this.x) +
                                '</b> ' + this.series.name + ': <b>' + this.y + '</b>';
                        }
                        //pointFormat: '终点桩号:formatPile({point.category}),  {series.name}值:{point.y}',
                        //align: 'left'
                    },
                    legend: {
                    
                        itemStyle: {
                            'fontSize': '18px'
                        }

                    },
                    series: []

                };

            });
        });

        function Query() {

            var rdId = $("#cmbRoadway").combobox("getValue");//路线编号
            var dir = $("#cmbDirection").combobox("getValue");//调查方向
            $.messager.progress({
                title: '请等待',
                msg: '正在处理中...'
            });
            $.ajax({
                type: 'POST',
                async: false,
                url: "/api/DiviResultChart/search?rdid=" + rdId + "&dir=" + encodeURI(dir),
                dataType: "json",
                beforeSend: function () {
                },
                complete: function () {
                    $.messager.progress('close');
                },
                success: function (msg) {

                    var data = eval('(' + msg + ')')
                    
                    if (data.categories) {
                        //设置X轴
                        options.xAxis.categories = data.categories;
                        options.xAxis.tickInterval = data.tickInterval;
                        //设置series数据
                        options.series = eval(data.series);
                        //设置图表
                        chart = new Highcharts.Chart(options);
                        //画原始路段线
                        segLine(eval(data.segIds));
                        //显示路段划分按钮
                        $("#qdld").show();
                       
                    }
                    //清空已保存路段
                    $("#newSegId").text('');
                },
                error: function (errorMsg) {
                    $.messager.alert('错误提示', errorMsg.responseText, "error");
                }
            });
        }



    </script>

    <script>
        //删除手动画线
        function delLine(id) {
            this.chart.xAxis[0].removePlotLine(id);
        }
        //手动画线
        function m(obj, x) {
            obj.xAxis[0].addPlotLine({
                value: x,//在x轴上增加 
                width: 4, //标示线的宽度为2px 
                label: {
                    text: '新路段',     //标签的内容
                    align: 'left',                //标签的水平位置，水平居左,默认是水平居中center
                    x: 10                         //标签相对于被定位的位置水平偏移的像素，重新定位，水平居左10px
                },
                color: 'red',            //线的颜色，定义为红色
                zIndex: 100,
                id: 'p-' + x, //标示线的id，在删除该标示线的时候需要该id标示 
                events: {
                    click: function (e) {
                        //删除
                        delLine(this.id)
                        //去掉被删除的该路段桩号
                        $("#newSegId").text($("#newSegId").text().replace(x + ",", ""))

                    }
                }

            });
        }

        //默认画原始路段线
        function segLine(segIds) {
            // 保存原始路段桩号
            $("#segid").val(segIds);
            $(segIds).each(function (i, e) {
                chart.xAxis[0].addPlotLine({
                    value: e,//在x轴上增加 
                    width: 1, //标示线的宽度为2px 
                    dashStyle: 'ShortDashDot',
                    id: 'p-' + e, //标示线的id，在删除该标示线的时候需要该id标示 
                    color: 'green' //线的颜色，定义为绿色
                });
            });

        }

        //清空所有原始路线和手动路线
        function clearAllLines() {
            var oldSegIds = ($("#newSegId").text() + $("#segid").val()).split(',');
            $(oldSegIds).each(function (i, e) {
                delLine('p-' + e);
            });
            $("#newSegId").text('');//清空手动路线
            $("#segid").val('');//清空原始路线
        }

        //画决策路段的线
        function segYHLine(ygSegIds) {
            $(ygSegIds).each(function (i, e) {
                chart.xAxis[0].addPlotLine({
                    value: e,//在x轴上增加 
                    width: 2, //标示线的宽度为2px 
                    dashStyle: 'solid',
                    color: 'green' //线的颜色，定义为绿色

                });
            });

        }

    </script>

    <script>
        $(function () {
            $("#qdld").hide() //养护路段划分
            $("#lxhf").hide()//养护类型划分
        })
        //根据路线和划分方式查询路段详情
        function search() {

            var rdid = $('#cmbRoadway').combobox('getValue'); //路线
            var dir = $('#cmbDirection').combobox('getValue'); //方向
            var url = '/api/DiviResultChart?';

            var urlParam = "";
            if (rdid != "") urlParam += "rdid=" + rdid + "&dir=" + dir;

            url = url + urlParam;

            $('#dg').datagrid({ url: url, pageNumber: 1 });
        }

        //全部清除
        function Clear() {
            var rdid = $('#cmbRoadway').combobox('getValue'); //路线编号
            var dir = $('#cmbDirection').combobox('getValue'); //方向


            $.ajax({
                url: "/api/DiviResultChart/clear?rdid=" + rdid + "&dir=" + dir,
                type: "post",
                complete: function () {
                    $.messager.progress('close');
                },
                success: function (msg) {

                    var segIds = $("#newSegId").text().split(',');
                    $(segIds).each(function (i, e) {
                        delLine('p-' + e);
                    });
                    $("#newSegId").text('');//清空
                    temp = null;//清空Json对象
                    Query();
                },

                error: function (msg) {
                    $.messager.alert('错误提示', msg.responseText, "error");
                }
            });
        }

        //路段划分
        function divideRoad() {
            if ($("#newSegId").text() == "") {
                if (confirm("确定按照默认分段吗?") == false) {
                    return;
                }
            }
            $.messager.progress({
                title: '请等待',
                msg: '正在处理中...'
            });

            var rdid = $('#cmbRoadway').combobox('getValue'); //路线编号
            var dir = $('#cmbDirection').combobox('getValue'); //方向
            var endmp = $("#newSegId").text();//新添加的路段

            if (endmp.length > 0) {
                endmp = endmp.substring(0, endmp.length - 1);//去掉最后一个逗号
            }

            $.ajax({
                type: 'POST',
                url: "/api/DiviResultChart/divide?rdid=" + rdid + "&dir=" + dir + "&endmp=" + encodeURI(endmp),
                dataType: "json",
                complete: function () {
                    $.messager.progress('close');
                },
                success: function (msg) {
                    //alert((msg.segIds));
                    //清空所有线路
                    clearAllLines();
                    //绘制决策路段线路
                    segYHLine(eval(msg.segIds));
                    $("#qdld").hide();//隐藏养护路段按钮
                    $("#lxhf").show();//显示养护类型划分按钮
                },

                error: function (msg) {
                    $.messager.alert('错误提示', msg.responseText, "error");
                }
            });

        }


    </script>


    <script>


        //联动
        $(function () {
            //路线方向联动---------------------------------------
            $(function () {
                var _mkid = $('#cmbRoadway').combobox({
                    onSelect: function (record) {
                        _zhbid.combobox({
                            url: '/api/DiviResultChart/searchDir?rdid=' + $("#cmbRoadway").combobox("getValue"),
                            valueField: 'id',
                            textField: 'text'
                        }).combobox('clear');
                    }
                });
                var _zhbid = $('#cmbDirection').combobox({
                    valueField: 'id',
                    textField: 'text'

                });

                //设置规范的默认值
                $('#cmbGF').combobox('setValue', '0');
            });
            //养护选择---------------------------------------
            $(function () {
                var _mkid = $('#cmbGF').combobox({
                    onSelect: function (record) {
                        _zhbid.combobox({
                            url: '/api/data/target?id=' + $("#cmbGF").combobox("getValue"),
                            valueField: 'id',
                            textField: 'text'
                        }).combobox('clear');
                    }
                });
                var _zhbid = $('#cmbZB').combobox({
                    valueField: 'id',
                    textField: 'text'

                });

                //设置规范的默认值
                $('#cmbGF').combobox('setValue', '0');
            });
        });
        //养护方案界面
        function showUI() {
            $('#dlgImport').dialog('open');
        }
        //关闭养护方案界面
        function closeUI() {
            $('#dlgImport').dialog('close');
        }

        //确定养护方案
        function confirmUI()
        {
            $.messager.progress({
                title: '请等待',
                msg: '正在处理中...'
            });

            var gf = $('#cmbGF').combobox('getValue'); //规范
            var zb = $('#cmbZB').combobox('getValue'); //指标

            var rdid = $('#cmbRoadway').combobox('getValue'); //路线编号
            var dir = $('#cmbDirection').combobox('getValue'); //方向
            $.ajax({
                url: "/api/DiviResultChart/divide_test?rdid=" + rdid + "&gf=" + gf + "&zb=" + zb + "&dir=" + dir,
                type: "post",
                dataType:"json",
                complete: function () {
                    $.messager.progress('close');
                },
                success: function (msg) {
                    temp = msg; //保存后台的Json对象
                    $("#lxhf").hide()//隐藏养护类型划分按钮
                    closeUI();
                    chart.tooltip.enabled = false;
                    //根据路段养护方案绘制阴影区
                    $(msg).each(function (i,obj) {
                        chart.xAxis[0].addPlotBand({
                            from: obj.Beginmp,
                            to: obj.Endmp,
                            color: formatColor(obj.Segid_Main),
                            borderColor: '#969696',
                            borderWidth:2,
                            label: {
                                text: "<b>"+formatMainType(obj.Segid_Main) + "</b> <br>桩号<b>" + formatPile(obj.Beginmp) + "--" + formatPile(obj.Endmp)+"</b>",
                                rotation: 90,
                                textAlign: 'left',
                                style: {
                                    color: '#ffffff'
                                },
                                useHTML:true
                            }
                        });
                    });
                   
                },

                error: function (msg) {
                    $.messager.alert('错误提示', msg.responseText, "error");
                }
            });
            
        }

        var temp //保存Json对象
        function OK()
        {
            if (temp) {
                $.messager.progress({
                    title: '请等待',
                    msg: '正在处理中...'
                });
                $.ajax({
                    type: 'POST',
                    url: "/api/DiviResultChart/divi" ,
                    dataType: "json",
                    data:{data:JSON.stringify(temp)},
                    complete: function () {
                        $.messager.progress('close');
                    },
                    success: function (msg) {
                        $.messager.alert('', "路段养护类型保存成功", "");
                    },

                    error: function (msg) {
                        $.messager.alert('错误提示', msg.responseText, "error");
                    }
                });
            }
        }

    </script>

</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    路线名称:
        <select id="cmbRoadway" class="easyui-combobox"  panelheight="80" style="width: 100px; font-size:20px"
            data-options="url:'/api/DiviResultChart/searchRoad',method:'get',valueField:'Rdwayid',textField:'Name',
                            onLoadSuccess:function(data){ 
            $('#cmbRoadway').combobox('setValue',data[0].Rdwayid);
             $('#cmbDirection').combobox({
                            url: '/api/DiviResultChart/searchDir?rdid=' + data[0].Rdwayid,
                            valueField: 'id',
                            textField: 'text'
                        }).combobox('clear');
            }">
        </select>
    行车方向:<select id="cmbDirection" class="easyui-combobox" panelheight="80" style="width: 100px"
        data-options="method:'get',valueField:'id',textField:'text',onLoadSuccess:function(data){ $('#cmbDirection').combobox('setValue',data[0].id);}">
    </select>

    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true" onclick="Query()">绘制</a>

    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true" onclick="Clear()">全部清除</a>
    <a href="javascript:void(0)" id="qdld" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true" onclick="divideRoad()">划分路段</a>

    <a href="#" id="lxhf" class="easyui-linkbutton" style="visibility:hidden" data-options="iconCls:'icon-remove',plain:true" onclick="showUI()">选择养护类型计算指标</a>

    <a href="#" class="easyui-linkbutton" style="visibility:hidden" data-options="iconCls:'icon-remove',plain:true" onclick="OK()">确定养护类型</a>
    <!--原始路段桩号-->
    <input id="segid" type="hidden" />
    <div id="aa" class="easyui-accordion" style="width: auto; height: auto;">
        <div title="路线图表" style="overflow: auto; padding: 10px;">
            <div id="container" style="margin: 0 auto">
            </div>


            划分桩号:<a id="newSegId" href="#"></a><a id="showSegId" href="#"></a>




        </div>
    </div>

     <!--划分路段-->
    <div id="dlgImport" class="easyui-dialog" title="选择养护类型计算指标" style="width: 320px; height: 250px; padding: 10px" closed="true" data-options="
				iconCls: 'icon-save',
				buttons: '#dlg-buttonsImport'
			">

        <table>
            <tr>
                <td>划分方式:</td>
                <td>
                    <select id="cmbGF" class="easyui-combobox" panelheight="80" style="width: 100px">
                        <option value="0">规范方法</option>
                        <option value="1">华美方法</option>
                    </select></td>
            </tr>
            <tr>
                <td>采用指标:</td>
                <td>
                    <select id="cmbZB" class="easyui-combobox" panelheight="80" style="width: 180px" data-options="url:'/api/data/target?id=0',method:'get',valueField:'id',textField:'text',
                              onLoadSuccess:function(data){ $('#cmbZB').combobox('setValue',data[0].id);}">
                    </select>
                </td>
            </tr>

        </table>

    </div>
    <!--划分路段命令-->
    <div id="dlg-buttonsImport">
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="javascript:confirmUI();">确定</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="javascript:closeUI()">取消</a>
    </div>
</asp:Content>
